<!-- 收益管理 -->
<template>
	<view class="earnings">
		<view style="height: 20rpx;"></view>
		<view class="card flex flex-jc-sb flex-ai-c" v-for="(item,i) in list" :key="i">
			<view>
				<view class="font-30">提现</view>
				<view class="font-24 mt-20" style="color: #999999;">{{item.createtime}}</view>
			</view>
			<view>
				<view class="font-30 font-bold">-{{item.money}}</view>
				<view class="mt-20 tag" :class="[`tag-${item.status}`]">{{item.status | filterStatus}}</view>
			</view>
		</view>
		<view style="padding: 50rpx 0;">
			<u-loadmore marginTop="20" :status="loadStatus" @loadmore="withdrawalRecode" />
		</view>
	</view>
</template>

<script>
	import user from '@/api/user.js';
	export default {
		data() {
			return {
				list: [],
				page: 1,
				loadStatus: ''
			}
		},
		filters: {
			filterStatus(v) {
				let text = ''
				switch (v) {
					case 0:
						text = '待处理'
						break
					case 1:
						text = '已打款'
						break
					case 2:
						text = '已失败'
						break
					case 3:
						text = '已退回'
						break
				}
				return text
			},
		},
		onLoad() {
			this.withdrawalRecode()
		},

		onReachBottom() {
			if (this.loadStatus == 'nomore') return
			this.withdrawalRecode()
		},
		methods: {
			moreStatus(status) {
				this.loadStatus = status
			},
			async withdrawalRecode() {
				uni.showLoading()
				const res = await user.withdrawalRecode({
					size: 15,
					page: this.page
				})
				this.list = [...this.list, ...res.data]
				uni.hideLoading()
				if (res.data.total <= 10) {
					this.loadStatus = 'nomore'
				} else {
					this.moreStatus(res.data.length !== 0 ? 'loadmore' : 'nomore')
				}
				if (res.data.length === 0) return false
				this.page += 1 // 当前页加1
			}
		}
	}
</script>

<style>
	page {
		height: 100%;
		background: #F2F2F2;
	}
</style>
<style lang="scss" scoped>
	.earnings {
		.card {
			padding: 30rpx;
			background: #FFFFFF;
			border-bottom: 1rpx solid #F2F2F2;

			.tag {
				width: 86rpx;
				height: 34rpx;
				border-radius: 4rpx;
				text-align: center;
				line-height: 34rpx;
				font-size: 22rpx;
			}

			.tag-0 {
				background: #FFF1D3;
				color: #FCB527;
			}

			.tag-1 {
				background: #EBF9EE;
				color: #20BD3A;
			}

			.tag-2 {
				background: #FFE8E3;
				color: #F95533;
			}

			.tag-3 {
				background: #FFF1D3;
				color: #FCB527;
			}
		}
	}
</style>